<template>
  <a-card :bordered="false">
    <h2 class="card__title">材料清洗工具</h2>
    <div class="table-operator">
      <a-button type="primary" ghost @click="onClickAdd">新建项目</a-button>
    </div>
    <a-table
      :columns="columns"
      :data-source="tableData"
      rowKey="uuid"
      :pagination="pagination"
      :loading="tableLoading"
      :expandedRowKeys="expandedRowKeys"
      :expandIconAsCell="false"
      @change="onTableChange"
      @expand="onClickExpand"
      size="middle"
    >
      <div slot="element" slot-scope="text, record">
        <template
          v-if="record.excel_status">
          已上传<a @click="onClickUpload(record)"><a-icon type="upload" style="font-size: 14px; margin-left: 4px;" /></a>
        </template>
        <a
          v-else
          @click="onClickUpload(record)"
        >点击上传<a-icon type="upload" style="font-size: 14px; margin-left: 4px;" /></a>
      </div>
      <div
        slot="expandedRowRender"
        slot-scope="item"
        class="expand__list"
      >
        <a-table
          :columns="innerColumns"
          :data-source="item.task_type"
          rowKey="id"
          :pagination="false"
          size="middle"
        >
          <div slot="action" slot-scope="text, inner">
            <a @click="onClickZx(item, inner)" v-if="inner.action_type !== 2 && inner.state !== 1">执行</a>
            <a-divider type="vertical" v-if="inner.action_type !== 2 && inner.state === 3" />
            <a @click="onClickSeeResult(item, inner)" v-if="inner.state === 3">查看结果</a>
          </div>
        </a-table>
      </div>
    </a-table>
    <add-modal
      v-if="visible1"
      :visible="visible1"
      :model="mdl1"
      @cancel="handleCancel(1)"
      @ok="handleOk1"
    />
    <upload-modal
      v-if="visible2"
      :visible="visible2"
      :model="mdl2"
      @cancel="handleCancel(2)"
      @ok="handleOk2"
    />
    <confirm-modal
      v-if="visible3"
      :visible="visible3"
      :model="mdl3"
      @cancel="handleCancel(3)"
      @ok="handleOk3"
    />
  </a-card>
</template>

<script>
import {
  handleExport
} from '@/api/common'
import {
  cleanList,
  startTask,
  exceptionFile
} from '@/api/handle'
import AddModal from './modules/AddModal.vue'
import UploadModal from './modules/UploadModal.vue'
import ConfirmModal from './modules/ConfirmModal.vue'
export default {

  components: {
    AddModal,
    UploadModal,
    ConfirmModal
  },

  data () {
    return {
      expandedRowKeys: [],
      currentTab: 0,
      visible1: false,
      visible2: false,
      visible3: false,
      mdl1: null,
      mdl2: null,
      mdl3: null,
      tableLoading: true,
      // 表格参数
      currentPage: 1, // 当前页
      pageSize: 10,
      pagination: {},
      tableData: []
    }
  },
  computed: {
    columns () {
      const columns = [
        {
          title: '项目名称',
          dataIndex: 'title',
          width: '30%'
        },
        {
          title: '案件要素表',
          dataIndex: 'element',
          scopedSlots:
          {
            customRender: 'element'
          }
        }
      ]
      return columns
    },

    innerColumns () {
      const innerColumns = [
        {
          title: '待清洗文件夹名称',
          dataIndex: 'task_name',
          width: '30%'
        },
        {
          title: '状态',
          dataIndex: 'state_txt'
        },
        {
          title: '操作',
          dataIndex: 'action',
          align: 'right',
          scopedSlots:
          {
            customRender: 'action'
          },
          width: 120
        }
      ]
      return innerColumns
    }
  },

  created () {
    this.initialize()
  },

  methods: {

    initialize () {
      this.searchList()
    },

    searchList () {
      return cleanList({
        page: this.currentPage,
        listrows: this.pageSize
      }).then((res) => {
        const { data } = res || {}
        this.tableData = data.data || []
        this.pagination = {
          current: this.currentPage,
          pageSize: this.pageSize,
          total: data.total,
          showSizeChanger: true,
          showTotal: this.showTotal
        }
        this.tableLoading = false
      })
    },

    showTotal (total) {
      return `共搜索到${total}条数据，`
    },

    handleCancel (index) {
      this[`mdl${index}`] = null
      this[`visible${index}`] = false
    },

    handleOk1 () {
      this.handleCancel(1)
      this.tableLoading = true
      this.searchList()
    },

    handleOk2 () {
      this.handleCancel(2)
      this.tableLoading = true
      this.searchList()
    },

    handleOk3 () {
      this.handleCancel(3)
      this.tableLoading = true
      this.searchList()
    },

    onTableChange (pagination, filters, sorter) {
      const { current, pageSize } = pagination || {}
      if (this.currentPage !== current || this.pageSize !== pageSize) {
        this.tableLoading = true
        this.currentPage = current
        this.pageSize = pageSize
        this.searchList()
      }
    },

    onClickExpand (expanded, record) {
      const index = this.expandedRowKeys.findIndex((item) => item === record.uuid)
      if (expanded) {
        this.expandedRowKeys.push(record.uuid)
       } else {
        this.expandedRowKeys.splice(index, 1)
      }
    },

    onChangeTab () {
      this.currentPage = 1
      this.tableLoading = true
      this.searchList()
    },

    onClickUpload (record) {
      this.mdl2 = { ...record }
      this.visible2 = true
    },

    onClickSeeResult (record, inner) {
      const { clean_status: cleanStatus } = record || {}
      const { action_type: actionType } = inner || {}
      this.tableLoading = true
      if (actionType === 1) {
        console.log(cleanStatus)
        if (cleanStatus === 2 || cleanStatus === 3) {
          return exceptionFile({
            _uuid_: record.uuid
          }).then((res) => {
            this.tableLoading = false
            if (cleanStatus === 2) { // 表单
              const list = []
              res.data.forEach(ele => {
                list.push({
                  name: ele
                })
              })
              this.mdl3 = { uuid: record.uuid, list }
              this.visible3 = true
            } else if (cleanStatus === 3) { // 提示
              this.$notification['success']({
                message: '提示',
                description: res.msg,
                duration: 4
              })
            }
          }).catch((e) => {
            this.tableLoading = false
            this.$notification['error']({
              message: '提示',
              description: e.msg,
              duration: 4
            })
          })
        }
      } else {
        // 下载
        const params = {
          _uuid_: record.uuid
        }
        handleExport(params, '/stream/lack_file_row', () => {
          this.tableLoading = false
        }, () => {
          this.tableLoading = false
        })
      }
    },

    onClickZx (record, inner) {
      this.tableLoading = true
      const { action_type: actionType } = inner || {}
      return startTask({
        action_type: actionType,
        _uuid_: record.uuid
      }).then((res) => {
        this.$notification['success']({
          message: '提示',
          description: res.msg,
          duration: 4
        })
        this.searchList()
      }).catch((e) => {
        this.tableLoading = false
        this.$notification['error']({
          message: '提示',
          description: e.msg,
          duration: 4
        })
      })
    },

    // 检索结果
    onCheckResult (record) {
      const routeUrl = this.$router.resolve({
        name: this.currentTab === 0 ? 'results' : 'coding',
        query: {
          uuid: record.uuid
        }
      })
      window.open(routeUrl.href, '_blank')
    },

    onClickAdd () {
      this.mdl1 = {
        from: this.currentTab
      }
      this.visible1 = true
    }
  }
}
</script>

<style lang="less" scoped>
.card__title {
  margin-bottom: 16px;
  font-weight: 700;
  font-size: 15px;
  color: #111;
}
</style>
